import { Router, Route, Switch, Redirect } from 'react-router-dom'
import React, { Suspense } from 'react'

// 鉴权组件
import AuthRoute from './components/AuthRoute'

// 这里使用底层的router +history属性  这样在组件外也可以使用history
import history from 'utils/history'

// 页面组件
// import Layout from './pages/Layout'
// import Login from './pages/Login'
// import NoFound from './pages/NoFound'
// 懒加载
const Layout = React.lazy(() => import('pages/Layout'))
const Login = React.lazy(() => import('pages/Login'))
const NoFound = React.lazy(() => import('pages/NoFound'))

function App() {
  return (
    <Router history={history}>
      <div className="App">
        {/* 配置路由规则 */}
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            <AuthRoute path="/home" component={Layout}></AuthRoute>
            {/* <Route path="/home" component={Layout}></Route> */}
            <Route path="/login" component={Login}></Route>
            <Route component={NoFound}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}

export default App
